<template>

  <div class="info-form"
  >
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-form-item label="旧密码：" prop="oldpwd">
        <el-input type="password" v-model="ruleForm2.oldpwd" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newpwd">
        <el-input type="password" v-model="ruleForm2.newpwd" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item class="btns">
        <el-button  @click="submitForm('ruleForm2')" class="red-btn">提交</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
  export default {

    name: 'keepAlivePwd',
    data: function () {

      var checkOldPass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('旧密码不能为空'));
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.newpwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          newpwd: '',    //1次输入密码  newpwd
          checkPass: '',   //2次输入密码
          oldpwd: ''   //旧密码  oldpwd
        },
        rules2: {
          newpwd: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          oldpwd: [
            { validator: checkOldPass, trigger: 'blur' }
          ]
        },
        loading: false
      };
    },
    created: function () {
        this.$$("#content").scrollTop(0)
       this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
       console.log(this.currentUser)
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm2);
            this.loading = true;
            let self = this;
            this.$axioxs.post("/user/"+this.currentUser.id+"?newpwd="+this.ruleForm2.newpwd+"&oldpwd="+this.ruleForm2.oldpwd)
                .then(function (res) {
                    console.log(JSON.stringify(res.data));
                    self.loading = false;
                    self.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    });

                    self.$refs[formName].resetFields();
                })
                .catch(function (error) {
                  console.log(error);
                  self.$message({
                      showClose: true,
                      type: 'error',
                      message: error,
                      onClose:function () {
                        self.loading = false;
                      }
                  });
                });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    }

}
</script>

<style scoped>
.my-shop{
  padding: 50px;
  background: #fff;
}
</style>
